<template>
    <div>
        <!-- 监听子组件的自定义事件 -->
        <Input @add="addHandler" />
        <List :list="list" @delete="deleteHandler" />
    </div>
</template>
<script>

    import Input from './Input'
    import List from './List'
    export default {
        components:{
            Input,
            List
        },
        data() {
            return {
                list:[
                    {
                        id:'id-1',
                        title:'标题1'
                    },
                    {
                        id:'id-2',
                        title:'标题2'
                    },
                    {
                        id:'id-3',
                        title:'标题3'
                    }                                          
                ]
            }
        },
        methods: {
            deleteHandler(index){
                this.list.splice(index,1)
            },
            addHandler(title){
                this.list.push({
                    id:`id-${Date.now()}`,
                    title
                })
            }
        },
    }
</script>
<style>

</style>